<template>
  <div class="layout">
    <Layout :style="{ height: '100vh' }">
      <Header class="header">
        <Menu mode="horizontal" theme="light" active-name="1">
          <div class="layout-logo">
            <img src="../assets/img/logo.png" alt />
          </div>
          <div class="layout-nav">
            <!-- <MenuItem name="1">
              <Icon type="ios-navigate"></Icon>Item 1
            </MenuItem>
            <MenuItem name="2">
              <Icon type="ios-keypad"></Icon>Item 2
            </MenuItem>
            <MenuItem name="3">
              <Icon type="ios-analytics"></Icon>Item 3
            </MenuItem>
            <MenuItem name="4">
              <Icon type="ios-paper"></Icon>Item 4
            </MenuItem>-->
          </div>
          <div class="layout-user">
            <Dropdown class="user-name" @on-click="slectName">
              <a href="javascript:void(0)">
                <Avatar icon="md-person" :src="avatar ? avatar : ''" size="26" />
                <em>
                  <span class="ellipsis" style="color:#333">{{ loginName }}</span>
                  <Icon type="ios-arrow-down"></Icon>
                </em>
              </a>
              <DropdownMenu slot="list">
                <!-- <DropdownItem name="shop" @click.native="goAdmin" v-if="adminType == 1">返回控制台</DropdownItem>
                <DropdownItem name="shop" @click.native="goShop" v-if="adminType == 2">选择店铺</DropdownItem>
                <DropdownItem name="system" @click.native="fixedAvatar">修改头像</DropdownItem>
                <DropdownItem name="merchant" @click.native="fixedName">修改真实姓名</DropdownItem>
                <DropdownItem name="merchant" @click.native="fixPass">修改密码</DropdownItem>-->
                <DropdownItem name="logout" @click.native="exit">退出账户</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </Menu>
      </Header>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }" class="sidebar">
          <Menu :active-name="activeName" theme="light" width="auto" :open-names="openName">
            <!-- <Submenu name="home">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>首页
              </template>
              <MenuItem name="/accountList" to="/accountList">账户列表</MenuItem>
            </Submenu>-->
            <MenuItem name="1" to="/home">
              <Icon type="ios-navigate"></Icon>首页
            </MenuItem>
            <Submenu name="2">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>账户管理
              </template>
              <MenuItem name="accountList" to="/accountList">账户列表</MenuItem>
              <MenuItem name="role" to="/role">角色管理</MenuItem>
            </Submenu>
            <Submenu name="3">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>登记报名管理
              </template>
              <MenuItem name="exhibitors" to="/exhibitors">展商报名列表</MenuItem>
              <MenuItem name="audience" to="/audience">观众报名列表</MenuItem>
            </Submenu>
            <Submenu name="4">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>展会概况
              </template>
              <MenuItem name="exhibition" to="/exhibition">展会列表</MenuItem>
              <!-- <MenuItem name="schedule" to="/exhibition/schedule">展会日程</MenuItem> -->
              <MenuItem name="classification" to="/exhibition/classification">文章分类</MenuItem>
              <MenuItem name="ArticleList" to="/exhibition/ArticleList">文章列表</MenuItem>
              <MenuItem name="New" to="/exhibition/New">微信图文素材列表</MenuItem>
            </Submenu>
            <Submenu name="5">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>会议论坛
              </template>
              <MenuItem name="Meeting" to="/meeting">会议列表</MenuItem>
            </Submenu>
            <Submenu name="6">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>配套活动
              </template>
              <MenuItem name="Activities" to="/activities">配套活动列表</MenuItem>
            </Submenu>
            <Submenu name="7">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>合作伙伴
              </template>
              <!-- <MenuItem name="Partner-class" to="/Partner-class">合作伙伴分类</MenuItem> -->
              <MenuItem name="Partners" to="/partners">合作伙伴列表</MenuItem>
            </Submenu>
            <Submenu name="8">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>服务团队
              </template>
              <MenuItem name="Service-team" to="/Service-team">服务团队列表</MenuItem>
            </Submenu>
            <Submenu name="9">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>展商管理
              </template>
              <MenuItem name="Exhibitor-list" to="/Exhibitor-list">展商名录列表</MenuItem>
              <MenuItem
                name="Ostentatious-enquiries"
                to="/Exhibitor-list/Ostentatious-enquiries"
              >招展询盘列表</MenuItem>
            </Submenu>
            <Submenu name="10">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>操作日志管理
              </template>
              <MenuItem name="system-log" to="/system-log">系统操作日志</MenuItem>
              <MenuItem name="weapp-log" to="/weapp-log">小程序用户日志</MenuItem>
            </Submenu>
            <Submenu name="11">
              <template slot="title">
                <Icon type="ios-navigate"></Icon>微信小程序
              </template>
              <MenuItem name="WxUser" to="/WxUser">小程序用户列表</MenuItem>
            </Submenu>
          </Menu>
        </Sider>
        <Layout>
          <Breadcrumb class="breadcrumb">
            <BreadcrumbItem
              v-for="(item,index) in breadList"
              :key="index"
              :to="item.path"
            >{{item.meta.title}}</BreadcrumbItem>
          </Breadcrumb>
          <!-- <Content :style="{padding: '24px',margin: '24px 0', minHeight: '280px', background: '#fff'}">
            <transition>
              <router-view></router-view>
            </transition>
          </Content>-->
          <Content :style="{ margin: '5px 10px 10px 210px', minHeight: '400px' }">
            <transition name="fade" mode="out-in">
              <router-view></router-view>
            </transition>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isCollapsed: false,
      breadList: [],
      openName: [],
      activeName: "",
      avatar: "",
      loginName: localStorage.getItem("realname")
    };
  },
  created() {
    this.getBreadcrumb();
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  computed: {
    menuitemClasses: function() {
      return ["menu-item", this.isCollapsed ? "collapsed-menu" : ""];
    }
  },
  methods: {
    getBreadcrumb() {
      // this.$nextTick(() => {

      // });
      this.openName.push(this.$route.meta.index);
      this.activeName = this.$route.name;
      this.breadList = [];
      let matched = this.$route.matched.filter(item => item.name);
      console.log(matched);
      matched.map((e, i) => {
        if (i + 1 < matched.length) {
          if (matched[i].path != matched[i + 1].path) {
            this.breadList.push(e);
          }
        } else if (i + 1 == matched.length) {
          this.breadList.push(e);
        }
      });
    },
    exit() {
      // let routeHistory=history.length-1;
      // this.$router.go(-routeHistory);
      localStorage.clear();
      // localStorage.removeItem("token");
      this.$router.push("/");
    },
    slectName() {}
  }
};
</script>
<style lang='less' scoped>
.ivu-menu-light {
  height: 100vh;
  overflow: scroll;
  padding-bottom: 60px;
}
.breadcrumb {
  box-sizing: border-box;
  background-color: #fff;
  overflow: hidden;
  padding: 20px 20px 8px 20px;
  margin: 70px 10px 10px 210px;
}
.ivu-layou {
  background-color: #999999 !important;
}
.layout {
  background: #999999;
  position: relative;
  border-radius: 4px;
  height: 100%;
}
.header {
  width: 100%;
  height: 60px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  .ivu-menu-light {
    height: 60px;
    overflow: hidden;
    padding-bottom: 0;
  }
}
.ivu-layout-header {
  padding: 0;
  background-color: #fff !important;
}
/* 侧边栏样式 */
.sidebar {
  position: fixed;
  min-width: 55px;
  height: 100%;
  background: #f2f2f2;
  margin-top: 60px;
  z-index: 998;
  font-size: 12px;
}
.layout-logo {
  // width: 30px;
  height: 34px;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  color: #fff;
  font-size: 16px;
  letter-spacing: 2px;
  img {
    width: 200px;
    height: 30px;
    vertical-align: top;
    margin-right: 15px;
  }
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
.layout-user {
  width: 140px;
  height: 60px;
  // background: #fff;
  //background: red;

  position: absolute;
  top: 0;
  right: 0;
  z-index: 998;

  .user-name {
    //background: #515A6E;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;

    a {
      display: block;
      height: 60px;
      text-align: center;
      color: #333;
      line-height: 60px;
      em {
        max-width: 80px;
        height: 60px;
        font-style: normal;
        //background: red;
        margin: 0 8px;
        text-align: left;
        span.ellipsis {
          //background: pink;
          max-width: 60px;
          display: inline-block;
          margin-right: 3px;
          vertical-align: middle;
        }
      }
    }
    li {
      font-size: 12px !important;
      text-align: center;
    }
  }
}
</style>
